<template>
  <div class="wechat-editor">
    <div class="editor-header">
      <h3>编辑微信公众号文章</h3>
      <div class="word-count">{{ wordCount }}字</div>
    </div>
    <textarea 
      style="width: 100%; height: 500px; border: 1px solid #ccc; padding: 10px; box-sizing: border-box;"
      v-model="valueText"
      @input="handleInput"
      placeholder="请输入内容..."
    ></textarea>
    <div class="editor-footer">
      <button class="publish-btn" @click="handlePublish">发布</button>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    const valueText = ref('')
    const wordCount = ref(0)

    const handleInput = () => {
      wordCount.value = valueText.value.length
      emit('content-update', valueText.value)
    }

    watch(() => props.content, (newVal) => {
      valueText.value = newVal || ''
      wordCount.value = valueText.value.length
    }, { immediate: true })

    const handlePublish = () => {
      // 微信公众号文案优化处理
      let contentText = valueText.value.trim()
      
      // 1. 字数统计与建议（微信公众号无严格限制，但需保持段落清晰）
      if (contentText.length < 300) {
        ElMessage.info('微信公众号文章建议300字以上，以获得更好的推荐效果')
      }
      
      // 2. 微信公众号特有的文本优化
      const wechatOptimizedContent = contentText
        // 优化标题格式（自动识别一级标题）
        .replace(/^(【标题】|标题：|# )(.*?)$/gm, '\n## $2\n')
        // 优化段落结构（确保段落间有空行）
        .replace(/\n\s*\n/g, '\n\n')
        // 确保开头有摘要感的引导
        .trim()
      
      // 3. 提取话题标签或关键词
      const regex = /#([^#\s]+)#/g
      const keywords = []
      let match
      while ((match = regex.exec(contentText)) !== null) {
        keywords.push(match[1])
      }
      
      // 4. 构建微信公众号标准发布数据结构
      const publishData = {
        platform: 'wechat',
        content: wechatOptimizedContent,
        keywords: keywords,
        postType: 'article',
        wordCount: wechatOptimizedContent.length
      }
      
      console.log('📤 微信公众号发布数据:', publishData)
      
      emit('publish', publishData)
      ElMessage.success('微信公众号发布成功')
    }

    return {
      valueText,
      wordCount,
      handleInput,
      handlePublish
    }
  }
}
</script>

<style scoped>
.wechat-editor {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  font-family: "Microsoft YaHei", sans-serif;
}

.editor-header {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.editor-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #141414;
}

.word-count {
  font-size: 18px;
  font-weight: 600;
  color: #07c160;
}

.editor-footer {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
}

.publish-btn {
  background-color: #07c160;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 24px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.publish-btn:hover {
  background-color: #06b355;
}
</style>